<template>
    <div class="user-table-list">
        <el-table  :data="tableData">
            <el-table-column
        :prop="item.key"
        :label="item.label"
        align="center"
        v-for="item in columnArray" :key="item.id">
        </el-table-column>
        <el-table-column
        fixed="right"
        label="操作"
        width="300"
        align="center"
        >
        <template slot-scope="scope">
            <el-button @click="handleChange(scope.row)" type="text" size="small">修改资料</el-button>
            <span class="split-line"></span>
            <el-button type="text" size="small" @click="changeAuthorizationRole(scope.row)">修改权限</el-button>
            <span class="split-line"></span>
            <el-button type="text" size="small" @click="changeStates(scope.row)">修改状态</el-button>
        </template>
        </el-table-column>
        </el-table>
        <change-state @close="showDialog = false" :showDialog="showDialog"></change-state>
    </div>
</template>
<script>
import changeState from './ChangeState'
export default {
    name: 'userTableList',
    props: {
        tableData: {
            type: Array,
            default () {
                return []
            }
        }
    },
    components: {
        changeState
    },
    data () {
        return {
            showDialog: false,
            columnArray: [
                {
                    key: 'id',
                    label: 'ID'
                },
                {
                    key: 'id',
                    label: '真实姓名'
                },
                {
                    key: 'id',
                    label: '用户名'
                },
                {
                    key: 'id',
                    label: '邮箱'
                },
                {
                    key: 'id',
                    label: '部门'
                },
                {
                    key: 'id',
                    label: '性别'
                },
                {
                    key: 'id',
                    label: '手机号'
                },
                {
                    key: 'id',
                    label: '创建时间'
                },
                {
                    key: 'id',
                    label: '状态'
                }
            ]
        }
    },
    methods: {
        handleChange (item) {
            this.$emit('changeUser', item)
        },
        changeAuthorizationRole (item) {
            this.$emit('changeAuthorization', item)
        },
        changeStates (item) {
            this.showDialog = true
        }
    }
}
</script>
<style>
.split-line {
        display: inline-block;
        width: 1px;
        height: 20px;
        background: #409EFF;
        vertical-align: middle;
}
</style>
